
<template>
    <view class='content'>
        <view class="head">
            <view class="head-img" v-if="userInfo.mobile">
                <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                    <image class="img" :src="userInfo.avatar" />
                </button> 
                <!-- <view class="edit">
                    <image src="/static/bjtx.png" />
                </view> -->
            </view>
            <view v-else style="font-size:32rpx" @click="goLogin">点击登录</view>
        </view>
        <view class="main">
            <view class="item" v-for="item in list" :key="item.pagePath" @click="goRouter(item.pagePath)">
                <view class="item-l">
                    <image class="icon" :src="item.iconPath" />
                    <view>{{ item.text }}</view>
                </view>
                <image class="jiantou" src="/static/jt.png" />
            </view>
        </view>
    </view>
    <tab-bar></tab-bar>
</template>
<script setup>
import {uploadFile,updateUser} from '@/service/index'
import {getUser} from '@/service/user'
import tabBar from '../../components/tabBar'
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, reactive, watch, onMounted } from 'vue';
import {BASE_URL} from '@/service/base'
const userInfo = ref({});
console.log(userInfo,'userInfo');
const list = [
    {
        pagePath: "/pages/order/list",
        iconPath: "/static/order.png",
        text: "我的订单",
    },
    {
        pagePath: "/pages/coupon/index",
        iconPath: "/static/yhj.png",
        text: "我的优惠券",
    },
    {
        pagePath: "/pages/coupon/detail",
        iconPath: "/static/tgjkt.png",
        text: "团购券开台",
    },
    {
        pagePath: "/pages/question/index",
        iconPath: "/static/cjwt.png",
        text: "常见问题",
    },
    {
        pagePath: "logout",
        iconPath: "/static/logout.png",
        text: "退出登录",
    }
]
const logout = () =>{
    uni.clearStorageSync();
    uni.setStorageSync('isLogout',true);
    uni.reLaunch({
        url: '/pages/index/index'
    })
}
const goLogin =()=>{
    uni.navigateTo({
        url: '/pages/login/index'
    })
}
const goRouter = (pagePath) => {
    if (!isLogin()) return;
    if(pagePath === 'logout'){
        uni.showModal({
            title: '提示',
            content: '您确定要退出登录吗？',
            success: function (res) {
                if (res.confirm) {
                    logout();
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        })
        
        return;
    }
    if(pagePath === '/pages/coupon/detail'){
        const storeId = uni.getStorageSync('store').id;
        console.log(storeId);
        uni.navigateTo({
            url: `${pagePath}?id=${storeId}`,
        });
    } else{
        uni.navigateTo({
        url: pagePath
    })
    }
}
const onChooseAvatar = (e)=>{
    const { avatarUrl } = e.detail 
    console.log(avatarUrl);
    uni.uploadFile({
        url: `${BASE_URL}/app-api/infra/file/upload`, //服务器地址
        filePath: avatarUrl,
        name: 'file',
        header: {
        'X-Access-Token': uni.getStorageSync("accessToken"),
        'Authorization': `Bearer ${uni.getStorageSync("accessToken")}`,
        },
        formData: {
            path:Math.floor(10000000000 + Math.random() * 89999999999) + ''
        },
        success: (res) => {
            console.log(res,'res');
            updateUser({avatar:JSON.parse(res.data).data}).then(res=>{
                console.log(res);
                getUserInfo();
            })
        },
        fail: (res) => {
        }
    });
   
    // userInfo.avatarUrl = avatarUrl
}
onMounted(()=>{
    // getUserInfo()
    uni.showShareMenu({
      withShareTicket: true,
      path:'pages/index/index',
      success: function (res) {
        console.log(res);
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        console.log(res);
      },
    });
})
const isLogin = () => {
	const openid = uni.getStorageSync('openid');
	if (!openid) {
		uni.navigateTo({
			url: '/pages/login/index'
		})
		return false
	}
	return true;
}
const getUserInfo = ()=>{
    getUser().then(res=>{
        uni.setStorageSync('userInfo', res);
        userInfo.value = res;
    })
}
onShow(()=>{
    getUserInfo()
})
</script>
<style lang='less' scoped>
.content {
    position: relative;
    background-color: #fff;
    height: 100vh;
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
    .head {
        height: 580rpx;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        .head-img {
            position: relative;
            width: 193rpx;
            height: 193rpx;
            border-radius: 50%;
            .avatar-wrapper{
                width: 193rpx;
                height: 193rpx;
                border-radius: 50%;
                margin:0;
                padding:0;
                border-radius:0;
                border:none;
                background-color:transparent;
                &::after{
                    border: none;
                }
            }
            .img {
                width: 193rpx;
                height: 193rpx;
                border-radius: 50%;
            }

            .edit {
                position: absolute;
                right: 0;
                top: 0;

                image {
                    border-radius: 50%;
                    width: 60rpx;
                    height: 60rpx;
                    background: linear-gradient(180deg, #E9FFF3 0%, #E8F1FF 100%);
                }
            }
        }
    }

    .main {
        .item {
            display: flex;
            align-items: center;
            height: 138rpx;
            background: #FFFFFF;
            box-shadow: inset 0rpx -2rpx 0rpx 0rpx #EEEEEE;
            font-size: 32rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #333333;
            padding: 0 36rpx;

            .item-l {
                flex: 1;
                display: flex;
                align-items: center;
            }

            .icon {
                width: 48rpx;
                height: 48rpx;
                margin-right: 26rpx;
            }

            .jiantou {
                width: 18rpx;
                height: 32rpx;
            }
        }
    }
}
</style>